﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Player App</title>
    <link href="style.css" rel="stylesheet"
          type="text/css"/>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
          rel="stylesheet"/>
</head>
<body>
<!--https://pixabay.com/videos/download/video-41758_source.mp4?attachment-->

<div class="player">
    <video class="video" playsinline
           src="001.mp4">
    </video>

    <!-- Show Controls -->
    <div class="show-controls">
        <div class="controls-container">
            <!-- Progress Bar -->
            <div class="progress-range"
                 title="Seek">
                <div class="progress-bar">

                </div>
            </div>
            <div class="control-group">
                <!-- Left Controls -->
                <div class="controls-left">
                    <!-- Play/Pause -->
                    <div class="play-controls">
                        <i class="fas fa-play"
                           id="play-btn"
                           title="Play"></i>
                    </div>
                    <!-- Volume -->
                    <div class="volume">
                        <div class="volume-icon">
                            <i class="fas fa-volume-up"
                               id="volume-icon"
                               title="Mute"></i>
                        </div>
                        <div class="volume-range"
                             title="Change Volume">
                            <div class="volume-bar">

                            </div>
                        </div>
                    </div>
                </div>
                <!-- Right Controls -->
                <div class="controls-right">
                    <!-- Speed -->
                    <div class="speed"
                         title="Playback Rate">
                        <select class="player-speed"
                                name="playbackRate">
                            <option value="0.5">
                                0.5 x
                            </option>
                            <option value="0.75">
                                0.75 x
                            </option>
                            <option selected
                                    value="1">1 x
                            </option>
                            <option value="1.5">
                                1.5 x
                            </option>
                            <option value="2">2
                                x
                            </option>
                        </select>
                    </div>
                    <!-- Time -->
                    <div class="time">
                        <span class="time-elapsed">00:00 / </span>
                        <span class="time-duration">2:34</span>
                    </div>
                    <!-- Fullscreen -->
                    <div class="fullscreen">
                        <i class="fas fa-expand"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="script.js"
        type="text/javascript"></script>
</body>
</html>